<template>
  <view class="rewardProgress">
    <pagehead>奖励进度</pagehead>
    <view class="tab">
      <view v-for="(item, index) in tab" :key="index" :class="[currentIndex == index ? 'active' : '', 'item']"
        @tap="changeTab(index)">{{ item.name }}</view>
    </view>
    <!-- <view class="rewardProgress-title">
      <view>
        历史数据
        <image :src="IMAGE_STATIC+'/images/arrow-right.png'" class="ico" mode="heightFix" />
      </view>
    </view> -->
    <!-- <view v-show="currentIndex==0">
      <init-image v-for="(item, index) in content" :key="index" :src="imgShow(item.img_url)" class="img" mode="widthFix" />
    </view> -->
    <view v-show="currentIndex==1">
      <init-image v-for="(item, index) in content1" :key="index" :src="imgShow(item.img_url)" class="img" mode="widthFix" />
    </view>
    <view class="info" v-show="currentIndex==0">
      <view class="time-info">
        <view class="left">更新时间：{{ now_date }}</view>
        <view class="left">奖励倒计时：{{ remain_date }}天</view>
      </view>
      <!-- <view class="top">数据更新时间: 2024-04-27</view> -->
      <view class="title">
        下级服务商
        <!-- <view class="cutime">奖励倒计时：
          <uni-countdown :second="countdownTime"  @end="countdownEnd"></uni-countdown>
        </view> -->
      </view>
      <view class="ul">
        <view class="li">
          <view class="p th">达标金额</view>
          <view class="p th">达标数量</view>
        </view>
        <view class="li" v-for="(item,index) in list" :key="index">
          <view class="p">{{viewCount(item.reach_money)}}</view>
          <view class="p">{{(item.reach_team_num)}}</view>
        </view>
      </view>
      <init-image v-for="(item, index) in content" :key="index" :src="imgShow(item.img_url)" class="img" mode="widthFix" />
      <!-- <view class="warn">离本月奖励结束还剩余3天,请加油哦。</view> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      type: '',
      pageIndex: 1,
      pageSize: 10,
      lastId: '',
      lsShow: true,
      isShowPage: true,
      tab: [
        // { name: '奖励政策' },
        { name: '团队管理政策' },
        { name: '推广奖' },
      ],
      total: 1,
      list: [
      ],
      content:'',
      content1:'',
      countdownTime:0,
      now_date:'',
      remain_date:''
    };
  },
  onLoad() {
    this.init();
  },
  // 下拉刷新
  onPullDownRefresh() {
    console.log('refresh');
    this.init();
    this.isLoadShow = true;
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  methods: {
    init() {
      this.getDetail('01');
      this.getDetail('02');
      this.pageIndex = 1
      this.pageSize = 10
      this.lastId = '';
      this.list = [];
      this.getRecord()
    },
    // 切换
    changeTab(index) {
      if (this.currentIndex != index) {
        this.currentIndex = index
        // this.init()
      }
    },
    getDetail(type) {
      let data = {
        img_type:type
      }
      this.$Ajax('/api/system/appImg/getAppImgList', data, res => {
        if (res.success) {
          if(type=='01'){
            this.content = res.data.appImgList
          }else{
            this.content1 = res.data.appImgList
          }
        }
      }, err => {
      }
      )
    },
    // 列表
    getRecord() {
      let that = this;
      var data = {
      };
      console.log("data", data);
      uni.showLoading({
        mask: true
      })
      that.$Ajax('/api/user/activity/getUserActivity', data, res => {
        uni.hideLoading();
        that.isShowPage = true;
        that.list = that.list.concat(res.data.userActivityList);
        this.now_date = res.data.now_date
        this.remain_date = res.data.remain_date
        // 计算初始倒计时时间
        this.updateCountdown();
      }, err => {
        uni.hideLoading();
        that.isShowPage = true;
      }
      );
    },
    // 更新倒计时时间
    updateCountdown() {
      const startTime =  new Date(this.now_date).getTime() 
      const currentTime = new Date().getTime(); // 当前时间
      const remain_date= Number(this.remain_date) * 24 * 60 * 60 * 1000
      const endTime = startTime + remain_date;
      const remainingTime = endTime - currentTime; // 剩余时间
      console.log('startTime',startTime,',endTime',endTime,',currentTime',currentTime,',remainingTime',remainingTime)
      if (remainingTime > 0) {
        var seconds = parseInt(remainingTime /  1000);
        this.countdownTime = seconds;
        console.log('seconds',seconds)
      } else {
        // 如果已经过了开始时间，则直接结束倒计时
        this.countdownEnd();
      }
      console.log('countdownTime',this.countdownTime)
    },
    // 倒计时结束的处理函数
    countdownEnd() {
      console.log('倒计时结束');
      // 这里可以添加你的结束逻辑
    },
    lower() {
      console.log("分页");
      if (this.lsShow == true) {
        // this.getRecord();
      } else {
        // return this.$tools.toast('到底了');
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.rewardProgress {
  .tab {
    @include flexBetween;
    background: #FFFFFF;
    box-shadow: inset 0rpx 1rpx 0rpx 0rpx #E7E7E7;

    .item {
      width: 50%;
      text-align: center;
      height: 96rpx;
      line-height: 96rpx;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.6);
    }

    .active {
      font-weight: 600;
      font-size: 32rpx;
      color: #333333;
      position: relative;
    }

    .active::before {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-40rpx);
      content: '';
      width: 80rpx;
      height: 8rpx;
      background: #AD2926;
      border-radius: 70rpx;
    }
  }

  &-title {
    @include flexRight;
    font-size: 28rpx;
    color: #666666;
    margin-top: 24rpx;
    padding: 0 24rpx;

    .ico {
      width: 32rpx;
      height: 32rpx;
      vertical-align: middle;
      margin-left: 10rpx;
      display: inline-block;
    }
  }
  .img{
    max-width: 100%;
  }

  .info {
    background: #fff;
    margin-top: 24rpx;
    padding: 32rpx 24rpx;
    border: 1px solid rgba(0, 0, 0, 0.08);

    .top {
      font-size: 28rpx;
      color: #999999;
      padding-bottom: 24rpx;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    .time-info{
      font-size: 28rpx;
      color: #333333;
      margin: 24rpx 0;
      @include flexBetween;
    }
    .title {
      font-size: 32rpx;
      color: #333333;
      margin: 24rpx 0;
      font-weight: bold;
      @include flexBetween;
      .cutime{
        @include flexLeft;
        font-size: 28rpx;
        color: #999999;
      }
    }

    .ul {

      .li {
        @include flexLeft;
        text-align: center;
        font-size: 24rpx;
        color: #333333;
        .p {
          width: 50%;
          padding: 24rpx 0;
          border-bottom: 1px solid #eee;
          border-left: 1px solid #eee;
        }

        .th {
          background: #EDEDED;
        }
      }

      .li:nth-of-type(2) .p {
        border-right: 1px solid #eee;
      }
    }
  }

  .warn {
    font-size: 28rpx;
    color: #999999;
    text-align: center;
    margin-top: 24rpx;
  }

  image {
    width: 100%;
    height: 100%;
  }
}
</style>
